import React,{PureComponent} from 'react'
import './App.scss'
import './icon.css'
class App extends PureComponent{
    state={
        products:[
            {
                id: 1755768776,
                itemName: "粒粒爆脆鲜甜，秘鲁进口青提 2斤",
                pic: "https://yanxuan-item.nosdn.127.net/e2488c4565e68f4b94f68bc6b6541841.png",
                preSellPrice: 79,
                promTag: "特价",
                subtotalPrice: 69,
                num:1,
                checked:true
            },
            {
                id: 1755813822,
                itemName: "男式干爽棉凉感短袖T恤",
                pic: "https://yanxuan-item.nosdn.127.net/2859a33a43893ba153665c5e9b2a33c0.png",
                preSellPrice: 79,
                promTag: "新品限时购",
                subtotalPrice: 67,
                num:1,
                checked:true
            },
            {
                id: 1766755229,
                itemName: "扫拖不用亲自动手，扫拖两用机器人",
                pic: "https://yanxuan-item.nosdn.127.net/04cdb48e20ecc028e491379f7609f214.jpg",
                preSellPrice: 2299,
                promTag: null,
                subtotalPrice: 2299,
                num:1,
                checked:true
            },
            {
                id: 1766792137,
                itemName: "多功能人体工学转椅",
                pic: "https://yanxuan-item.nosdn.127.net/7185a719ee29e15efbc65f2ce612f509.png",
                preSellPrice: 1399,
                promTag: "新人特价包邮",
                subtotalPrice: 1099,
                num:1,
                checked:true
            },
            {
                id: 1766811014,
                itemName: "Air真无线耳机，空气感佩戴，2020年全新款",
                pic: "https://yanxuan-item.nosdn.127.net/dd9ad75ad3c1cd152c8edcc43db4e444.png",
                preSellPrice: 199,
                promTag: "新人特价包邮",
                subtotalPrice: 129,
                num:1,
                checked:true
            }
        ]
    }
    subClick=(e)=>{
        let arr=this.state.products  
        this.setState({
            num:--arr[e.currentTarget.dataset.index].num
        })
    }
    addClick=(e)=>{
        let arr=this.state.products
        this.setState({
            num:++arr[e.currentTarget.dataset.index].num
        })
    }
    totalPrice=()=>{
        let sum=0;
        this.state.products.forEach(item=>{
            if(item.checked){
                sum+=item.subtotalPrice*item.num
            }
        })
        return sum
    }
    selectCount=()=>{
        let count=0;
        this.state.products.forEach(item=>{
            if(item.checked){
                count++
            }
        })
        return count
    }
    render(){
        return(
            <div className="shopping-car">
                {/* 头部 */}
                <div className="header">
                    <div className="header-left">
                        <h2>购物车</h2>
                    </div>
                    <div className="header-right">
                        <p>领券</p>
                        <p>编辑</p>
                    </div>
                </div>
                {/* 购物车商品列表 */}
                <div className="goods-list">
                    <div className="free-shipping ">
                        <div>已满足免邮条件</div>
                        <a href="https://www.baidu.com/">
                            <span>全场换购</span>
                            <span>已满足199元享低至3.2折超值换购</span>
                            <span><i>再逛逛</i><i className="iconfont icon-arrowright"></i></span>
                        </a>
                        <a href="https://www.baidu.com/">
                            <i>去换购商品</i>
                            <i className="iconfont icon-arrowright"></i>
                        </a>
                    </div>
                    <div className="goods">
                        <ul>
                         {this.state.products.map((item,index)=>{
                             return    <li key={this.state.products[index].id}>
                             <div className="goods-left">
                                 <span className="iconfont icon-xuanzhong-2"></span>
                             </div>
                             <div className="goods-middle">
                                 <a href="https://www.baidu.com/">
                                     <img src={this.state.products[index].pic} alt=""></img>
                                 </a>
                             </div>
                             <div className="goods-right">
                                 <h2>
                                 <strong>{this.state.products[index].promTag}</strong>
                                  {this.state.products[index].itemName}
                                 </h2>
                                 <span>2斤<i className="iconfont icon-arrow-top"></i></span>
                                 <div>
                                     <div>
                                     <span>￥{this.state.products[index].subtotalPrice}</span>
                                         <span>￥{this.state.products[index].preSellPrice}</span>
                                     </div>
                                     <div>
                                         <button onClick={this.subClick} data-index={index}>-</button>
                                         <span>{this.state.products[index].num}</span>
                                         <button onClick={this.addClick} data-index={index}>+</button>
                                     </div>
                                 </div>
                             </div>
                         </li>
                         })}
                        </ul>
                    </div>
                </div>
                {/* 底部 */}
                <div className="footer">
                    <div className="footer-subtotal">
                        <div className="subtotal-left">
                            <p className="iconfont icon-xuanzhong-2"></p>
                            <p>已选({this.selectCount()})</p>
                        </div>
                        <div className="subtotal-right">
                            <div>
                                <span>合计：￥{this.totalPrice()}</span>
                                <span>已优惠：￥92</span>
                            </div>
                            <div>
                                <button>下单</button>
                            </div>
                        </div>
                    </div>
                    <div className="footer-nav">
                        <dl>
                            <dt className="iconfont icon-shouye"></dt>
                            <dd>首页</dd>
                        </dl>
                        <dl>
                            <dt className="iconfont icon-category"></dt>
                            <dd>分类</dd>
                        </dl>
                        <dl>
                            <dt className="iconfont icon-zhaopian "></dt>
                            <dd>值得买</dd>
                        </dl>
                        <dl>
                            <dt className="iconfont icon-gouwuche"></dt>
                            <dd>购物车</dd>
                        </dl>
                        <dl>
                            <dt className="iconfont icon-me"></dt>
                            <dd>个人</dd>
                        </dl>
                    </div>
                </div>
            </div>
        )
    }
}
export default App